
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useLanguage } from "@/contexts/LanguageContext";
import { BarChart3, TrendingUp, Users, Clock, Award, ChevronUp, ChevronDown } from "lucide-react";

const Analytics = () => {
  const { t } = useLanguage();

  const classStats = [
    {
      class: "Biology 101",
      students: 28,
      avgEngagement: 85,
      completionRate: 92,
      trend: "up"
    },
    {
      class: "Chemistry Lab",
      students: 24,
      avgEngagement: 78,
      completionRate: 88,
      trend: "up"
    },
    {
      class: "Physics Advanced",
      students: 19,
      avgEngagement: 72,
      completionRate: 85,
      trend: "down"
    }
  ];

  const topStudents = [
    { name: "Sarah Chen", class: "Biology 101", score: 98, streak: 15 },
    { name: "Marcus Johnson", class: "Chemistry Lab", score: 96, streak: 12 },
    { name: "Emma Rodriguez", class: "Physics Advanced", score: 94, streak: 10 }
  ];

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Navbar />

      <main className="flex-1 py-8">
        <div className="container mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              {t('analytics.title')}
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl">
              {t('analytics.subtitle')}
            </p>
          </div>

          {/* Overview Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">{t('analytics.totalStudents')}</p>
                    <p className="text-2xl font-bold text-gray-900">71</p>
                  </div>
                  <Users className="w-8 h-8 text-blue-600" />
                </div>
                <div className="flex items-center mt-2">
                  <ChevronUp className="w-4 h-4 text-green-600" />
                  <span className="text-sm text-green-600">+5% from last month</span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">{t('analytics.avgEngagement')}</p>
                    <p className="text-2xl font-bold text-gray-900">78%</p>
                  </div>
                  <TrendingUp className="w-8 h-8 text-green-600" />
                </div>
                <div className="flex items-center mt-2">
                  <ChevronUp className="w-4 h-4 text-green-600" />
                  <span className="text-sm text-green-600">+12% from last week</span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">{t('analytics.completionRate')}</p>
                    <p className="text-2xl font-bold text-gray-900">88%</p>
                  </div>
                  <Award className="w-8 h-8 text-yellow-600" />
                </div>
                <div className="flex items-center mt-2">
                  <ChevronUp className="w-4 h-4 text-green-600" />
                  <span className="text-sm text-green-600">+3% from last month</span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">{t('analytics.avgTime')}</p>
                    <p className="text-2xl font-bold text-gray-900">42min</p>
                  </div>
                  <Clock className="w-8 h-8 text-purple-600" />
                </div>
                <div className="flex items-center mt-2">
                  <ChevronDown className="w-4 h-4 text-red-600" />
                  <span className="text-sm text-red-600">-8% from last week</span>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            {/* Class Performance */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <BarChart3 className="w-5 h-5" />
                  {t('analytics.classPerformance')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {classStats.map((classItem, index) => (
                    <div key={index} className="border rounded-lg p-4">
                      <div className="flex justify-between items-start mb-3">
                        <div>
                          <h3 className="font-semibold">{classItem.class}</h3>
                          <p className="text-sm text-gray-600">{classItem.students} {t('analytics.students')}</p>
                        </div>
                        <div className="flex items-center gap-1">
                          {classItem.trend === "up" ? (
                            <ChevronUp className="w-4 h-4 text-green-600" />
                          ) : (
                            <ChevronDown className="w-4 h-4 text-red-600" />
                          )}
                        </div>
                      </div>
                      
                      <div className="grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <p className="text-gray-600">{t('analytics.engagement')}</p>
                          <p className="font-semibold">{classItem.avgEngagement}%</p>
                        </div>
                        <div>
                          <p className="text-gray-600">{t('analytics.completion')}</p>
                          <p className="font-semibold">{classItem.completionRate}%</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* Top Performers */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Award className="w-5 h-5" />
                  {t('analytics.topPerformers')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {topStudents.map((student, index) => (
                    <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-semibold text-sm">
                          {index + 1}
                        </div>
                        <div>
                          <p className="font-semibold">{student.name}</p>
                          <p className="text-sm text-gray-600">{student.class}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold text-green-600">{student.score}%</p>
                        <p className="text-xs text-gray-500">{student.streak} day streak</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Skills Development Tracking */}
          <Card>
            <CardHeader>
              <CardTitle>{t('analytics.skillsDevelopment')}</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <BarChart3 className="w-8 h-8 text-blue-600" />
                  </div>
                  <h3 className="font-semib   text-lg mb-2">{t('analytics.criticalThinking')}</h3>
                  <p className="text-gray-600 text-sm">Average class improvement: +23%</p>
                  <Badge className="mt-2 bg-blue-100 text-blue-700">Trending Up</Badge>
                </div>
                
                <div className="text-center">
                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <Users className="w-8 h-8 text-green-600" />
                  </div>
                  <h3 className="font-semibold text-lg mb-2">{t('analytics.collaboration')}</h3>
                  <p className="text-gray-600 text-sm">Average class improvement: +18%</p>
                  <Badge className="mt-2 bg-green-100 text-green-700">Steady Growth</Badge>
                </div>
                
                <div className="text-center">
                  <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <TrendingUp className="w-8 h-8 text-purple-600" />
                  </div>
                  <h3 className="font-semibold text-lg mb-2">{t('analytics.problemSolving')}</h3>
                  <p className="text-gray-600 text-sm">Average class improvement: +31%</p>
                  <Badge className="mt-2 bg-purple-100 text-purple-700">Excellent</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default Analytics;
